<template>
  <div class="box">
    <userID></userID>
    <NavigationBar></NavigationBar>
    <div class="shoppingCar">
        <h1 class="title">首页 > <span>购物车</span></h1>
        <table v-if="goods" class="shopList">
            <thead>
                <tr>
                    <td>
                        <label for="all">
                            <input type="checkbox" :checked="isCheckAll" @click="allCheck" id="all">
                            <span></span>
                            <span class="txt">全选</span>
                        </label>
                    </td>
                    <td>商品信息</td>
                    <td>单价</td>
                    <td>数量</td>
                    <td>小计</td>
                    <td>操作</td>
                </tr>
            </thead>
            <tbody>
                <ShopView @changedCheck="lockChecked" :isCheckAll="isCheckAll" :sendGoods="item" v-for="item in goods" :key="item.skuId"></ShopView>
            </tbody>
        </table>
        <div v-else class="auto">
            <img src="" alt="">
            <p>购物车内暂时没有商品</p>
            <button class="btn">继续逛逛</button>
        </div>
        <div class="active">
                <div>
                    <span>
                        <label for="all">
                            <input type="checkbox" :checked="isCheckAll" @click="allCheck" id="all">
                            <span></span>
                            <span class="txt">全选</span>
                        </label>
                    </span>
                    <span>删除商品</span>
                    <span>移入收藏夹</span>
                    <span>清空失效商品</span>
                </div>
                <div>
                    <span>共<span class="">&nbsp;&nbsp;{{ count }}</span>件商品,&nbsp;&nbsp;已选择<span>{{ ids.length }}</span>件,&nbsp;&nbsp;商品合计:&nbsp;<span class="total">&nbsp;￥{{ money }}</span></span>
                    <span><button @click="js" class="btn">下单结算</button></span>
                </div>
            </div>
    </div>
    <div class="youLike">
        <div class="youLike_header">
            <img src="" alt="">
            <span>猜你喜欢</span>
        </div>
        <div class="youLike_body">
            <van-icon class="prev" name="arrow-left" @click="prev" />
            <van-swipe ref="swiper" id="swiper" class="my-swipe" indicator-color="#ddd" lazy-render>
                <van-swipe-item class="swipe_item">
                    <div class="slider">
                        <a href="#">
                            <img src="https://yanxuan-item.nosdn.127.net/fa3d10a78d37bbd3956ef5f8c855d1dc.jpg" alt="">
                            <p class="name">休闲潮流运动胸包</p>
                            <p class="price">￥136.00</p>
                        </a>
                        <a href="#">
                            <img src="https://yanxuan-item.nosdn.127.net/841d7669e6cc23cb249f47d8d39fc17c.jpg" alt="">
                            <p class="name">新款LOGO印花时尚...</p>
                            <p class="price">￥259.00</p>
                        </a>
                        <a href="#">
                            <img src="https://yanxuan-item.nosdn.127.net/084f82c43a71bbc4d280fbb09a47a028.jpg" alt="">
                            <p class="name">经典格子元素，男童...</p>
                            <p class="price">￥125.00</p>
                        </a>
                        <a href="#">
                            <img src="https://yanxuan-item.nosdn.127.net/d917c92e663c5ed0bb577c7ded73e4ec.png" alt="">
                            <p class="name">抓绒保暖，毛毛虫儿...</p>
                            <p class="price">￥109.00</p>
                        </a>
                    </div>
                </van-swipe-item>
                <van-swipe-item class="swipe_item">
                    <div class="slider">
                        <a href="#">
                            <img src="https://yanxuan-item.nosdn.127.net/937a8e46a9284e8f7e00e13911ecfbe7.png" alt="">
                            <p class="name">3秒快速拆琴轻松保...</p>
                            <p class="price">￥329.00</p>
                        </a>
                        <a href="#">
                            <img src="https://yanxuan-item.nosdn.127.net/72f50e8d10cf3c6a040c2f800774b007.jpg" alt="">
                            <p class="name">别致优雅男式新潮头...</p>
                            <p class="price">￥106.00</p>
                        </a>
                        <a href="#">
                            <img src="https://yanxuan-item.nosdn.127.net/da7143e0103304f0f3230715003181ee.jpg" alt="">
                            <p class="name">人手必备，儿童轻薄...</p>
                            <p class="price">￥69.00</p>
                        </a>
                        <a href="#">
                            <img src="https://yanxuan-item.nosdn.127.net/66090c5de391e43e4516601e14870842.jpg" alt="">
                            <p class="name">探险者黑胶防晒防雨...</p>
                            <p class="price">￥169.00</p>
                        </a>
                    </div>
                </van-swipe-item>
                <van-swipe-item class="swipe_item">
                    <div class="slider">
                        <a href="#">
                            <img src="https://yanxuan-item.nosdn.127.net/8f3a3b7dc6ca874f934b15af31417f61.png" alt="">
                            <p class="name">KJE金属色系轻量电...</p>
                            <p class="price">￥120.00</p>
                        </a>
                        <a href="#">
                            <img src="https://yanxuan-item.nosdn.127.net/a5d745bbe067ca2468cdb2948f4f10ca.jpg" alt="">
                            <p class="name">麦瑞克家用轻音智能...</p>
                            <p class="price">￥2089.00</p>
                        </a>
                        <a href="#">
                            <img src="https://yanxuan-item.nosdn.127.net/a71ac0318831f3d5f80d513d24ec1ac7.jpg" alt="">
                            <p class="name">麦瑞克折叠收纳进口...</p>
                            <p class="price">￥2299.00</p>
                        </a>
                        <a href="#">
                            <img src="https://yanxuan-item.nosdn.127.net/ccf7aa782c3a1daf2cd53bf6f1ade697.jpg" alt="">
                            <p class="name">冬日穿搭利器，女童...</p>
                            <p class="price">￥79.00</p>
                        </a>
                    </div>
                </van-swipe-item>
                <van-swipe-item class="swipe_item">
                    <div class="slider">
                        <a href="#">
                            <img src="https://yanxuan-item.nosdn.127.net/cd5f2f47a6f66af9b219f03afc5c8b33.png" alt="">
                            <p class="name">会降温的儿童防蚊裤...</p>
                            <p class="price">￥25.00</p>
                        </a>
                        <a href="#">
                            <img src="https://yanxuan-item.nosdn.127.net/ae521f6d97560598f3e6b3ddaed477c0.png" alt="">
                            <p class="name">亚洲头围城市运动通...</p>
                            <p class="price">￥158.00</p>
                        </a>
                        <a href="#">
                            <img src="https://yanxuan-item.nosdn.127.net/a6939f41c48fa9e9c8f7a7ed855351f1.jpg" alt="">
                            <p class="name">七夕礼物·姐姐同款...</p>
                            <p class="price">￥159.00</p>
                        </a>
                        <a href="#">
                            <img src="https://yanxuan-item.nosdn.127.net/d917c92e663c5ed0bb577c7ded73e4ec.png" alt="">
                            <p class="name">软牛皮少女系英伦鞋...</p>
                            <p class="price">￥236.00</p>
                        </a>
                    </div>
                </van-swipe-item>
            </van-swipe>
            <van-icon class="next" name="arrow"  @click="next" />
        </div>
    </div>
    <bottom></bottom>
</div>
</template>

<script>
import ShopView from './components/shopView.vue';
import NavigationBar from '@/components/NavigationBar.vue'
import bottom from '@/components/bottom.vue'
import userID from '@/components/userID.vue'
import { mapState,mapMutations } from "vuex"
export default {
    name:"ShoppingCar",
    components:{
        ShopView,
        NavigationBar,
        userID,
        bottom
    },
    data(){
        return {
            goods:[],
            ids:[],
            count:0,
            money:0,
            checked:null,
            isCheckAll:false,
        }
    },
    async mounted(){
        const res = await this.$.getGoodsList({Authorization:localStorage.getItem("token")});
        this.goods = res.data.result;
        this.sendGoods = this.goods;
        console.log(this.goods);
        this.getMoney();
        this.goods.forEach(item => {
            if(item.selected){
                return this.ids.includes(item.skuId) ? "" : this.ids.push(item.skuId)
            }
        });
        if(this.ids.length == this.goods.length){
            this.isCheckAll = true
        }else{
            this.isCheckAll = false
        }
        if(!this.isCheckAll){
            this.ids = [];
        }
        if(!this.checked){
            this.isCheckAll = false
        }
        console.log(this.ids);
    },
    methods:{
        getMoney(){
            this.sendGoods.forEach(item => {
                this.count += item.count;
                this.money += item.nowOriginalPrice* item.count;
            });
        },
        lockChecked(checked){
            this.checked = checked
        },
        ...mapState(['moneyAll','countAll']),
        ...mapMutations(['updateMoney','updateCount']),
        updateMoney(){
        this.$store.commit('updateMoney',this.money)
        },
        updateCount(){
        this.$store.commit('updateCount',this.count)
        },
        async allCheck(){
            this.isCheckAll =!this.isCheckAll;
            if(!this.isCheckAll){
                this.ids = [];
            }
            const res = await this.$.putGoodsAll({
                selected:this.isCheckAll,
                ids:this.ids
            });
            // console.log(res);
            // console.log(this.ids);
        },
        prev(){
            const btn = this.$refs["swiper"];
            btn.prev();
        },
        next(){
            const btn = this.$refs["swiper"];
            btn.next();
        },
        js(){
            this.$router.push({
                path:"/orders"
            })
            console.log(res);
        }
    },
    watch:{
        checked:{
            immediate:true,
            handler(val){
                if(!val){
                    this.isCheckAll = false
                }
            },
            deep:true
        }
    }
}
</script>

<style lang="less" scoped>
    ul,li{
        margin:0;
        padding:0;
        list-style:none;
    }
    a{
        text-decoration:none;
        color:#333;
        outline:none;
    }
    input[type=checkbox]{
        display:none;
    }
    .btn{
        width: 180px;
        height: 50px;
        line-height:50px;
        border-radius:5px;
        font-size: 16px;
        border:none;
        background: #27ba9b;
        color: #fff;
    }
    .box{
        background-color:#f5f5f5;
            .shoppingCar{
            width:1240px;
            margin:0 auto;
            // margin:0 340px;340
            font-size:16px;
            background-color:#f5f5f5;
            .title{
                height:72px;
                line-height:72px;
                font-size:14px;
                padding:0 25px;
                color:#666666;
                span{
                    color:#000;
                }
            }
            .shopList{
                width:1240px;
                background-color:#fff;
                margin:0;
                padding:0;
                thead{
                    tr{
                    width:1240px;
                    height:71px;
                    line-height:71px;
                    position:relative;
                    display:flex;
                    justify-content:space-between;
                    color:#666;
                    border-bottom:1px solid #f5f5f5;
                    padding:0 30px;
                    td{
                        &:nth-child(1){
                            width:100px;
                            text-align:left;
                            color:#999;
                            input[type=checkbox]+span{
                            display:inline-block;
                            border-radius:40%;
                            width:20px;
                            height:20px;
                            border:1px solid #999;
                            position:absolute;
                            top:25px; 
                            left:30px;
                        }
                        input[type=checkbox]:checked+span::after{
                            content:"✔";
                            color:#41A863;
                            font-size:30px;
                            position:absolute;
                            top:-28px; 
                            left:0;
                        }
                        .txt{
                            margin-left:30px;
                        }
                        .text{
                            color:#41A863;
                        }
                        }
                        &:nth-child(2){
                            width:200px;
                            text-align:center;
                        }
                        &:nth-child(3){
                            width:100px;
                            text-align:center;
                            padding-left:30px;
                        }
                        &:nth-child(4){
                            width:180px;
                            text-align:center;
                        }
                        &:nth-child(5){
                            width:150px;
                            text-align:center;
                        }
                        &:last-child{
                            width:100px;
                            text-align:center;
                        }
                    }
                }
                }
                tbody{
                    width:0;
                    height:0;
                }
            }
            .auto{
                width:1240px;
                text-align: center;
                padding: 150px 0;
                background:#fff;
                p{
                    color: #999;
                    padding: 20px 0;
                }
            }
            .active{
                background-color:#fff;
                border-top:20px solid #f5f5f5;
                width:1240px;
                display:flex;
                justify-content:space-between;
                div{
                    padding:0 30px;
                    height:72px;
                    line-height:72px;
                    color:#666;
                    span:nth-child(1){
                        margin-left:0;
                        position:relative;
                        input[type=checkbox]+span{
                            display:inline-block;
                            border-radius:40%;
                            width:20px;
                            height:20px;
                            border:1px solid #999;
                            position:absolute;
                            top:25px; 
                            left:-10px;
                        }
                        input[type=checkbox]:checked+span::after{
                            content:"✔";
                            color:#41A863;
                            font-size:30px;
                            position:absolute;
                            top:-28px; 
                            left:0;
                        }
                        .txt{
                            margin-left:25px;
                        }
                    }
                    span{
                        display:inline-block;
                        margin:0 12px;
                    }
                    .total{
                        color:#cf4444;
                    }
                }
            }
        }
        .youLike{
            width:1240px;
            margin:0 auto;
            // margin:0 340px;
            background: #fff;
            min-height: 460px;
            margin-top: 20px;
            .youLike_header{
                height: 80px;
                line-height:40px;
                padding: 0 20px;
                span{
                    font-size: 20px;
                    padding-left: 10px;
                }
            }
            .youLike_body{
                position:relative;
                .my-swipe{
                    .swipe_item {
                    color: #000;
                    font-size: 20px;
                    height:360px;
                    text-align: center;
                    .slider{
                        display: flex;
                        justify-content: space-around;
                        padding: 0 40px;
                        & > a{
                        width:240px;
                        text-align:center;
                        }
                        & > a img{
                            padding: 20px;
                            width: 230px !important;
                            height: 230px !important;
                        }
                        & > a .name{
                            font-size: 16px;
                            color: #666;
                            padding: 0 40px;
                            text-overflow: ellipsis;
                            overflow: hidden;
                            margin:0;
                        }
                        & > a .price{
                            font-size: 16px;
                            color: #cf4444;
                            margin-top: 15px;
                        }
                    }
                }
                }
            }
            .prev,.next{
                        width:50px;
                        height:50px;
                        position:absolute;
                        top:50%;
                        margin-top:-70px;
                        z-index: 99999;
                        cursor:grab;
                    }
                    .prev{
                        font-size:45px;
                        left:0;
                        margin-left:20px;
                    }
                    .next{
                        font-size:45px;
                        right:0;
                        margin-right:20px;
                    }
        }
    }
</style>